<template>
  <!-- 当一个 form 元素中只有一个输入框时，在该输入框中按下回车应提交该表单。如果希望阻止这一默认行为，可以在 <el-form> 标签上添加 @submit.native.prevent。-->
  <el-form
    ref="ruleForm"
    :inline="true"
    :model="searchForm"
    class="demo-form-inline"
    @submit.native.prevent=""
  >
    <el-form-item
      v-for="(item,index) in queryColumns"
      :key="index"
      :label="item.label"
    >
      <template v-if="item.type == 'input'">
        <el-input
          v-model="searchForm[item.param]"
          :placeholder="item.placeholder"
          clearable
          style="width: 160px"
          @clear="onClearInput"
          @keyup.enter.native="onSearch"
        />
      </template>
      <template v-else-if="item.type == 'select'">
        <el-select
          v-model="searchForm[item.param]"
          clearable
          style="width: 160px"
          :placeholder="item.placeholder"
        >
          <el-option
            v-for="subitem in item.selectOptions"
            :key="subitem.value"
            :label="subitem.name"
            :value="subitem.value"
          />
        </el-select>
      </template>
      <template v-else-if="item.type == 'selectRemote'">
        <slot name="selectRemote" :param="item.param" />
      </template>
      <template v-else-if="item.type == 'datetimeRange'">
        <slot name="datetimeRange" />
      </template>
    </el-form-item>
    <slot name="clearButton">
      <template v-if="shouldClearButton">
        <el-form-item>
          <el-button type="info" icon="el-icon-delete" plain @click="onEmpty" />
        </el-form-item>
      </template>
    </slot>
    <el-form-item>
      <el-button type="primary" icon="el-icon-search" @click="onSearch" />
    </el-form-item>
    <slot name="button">
      <template v-if="shouldAddButton">
        <el-form-item>
          <el-button type="success" @click="onAdd">添加</el-button>
        </el-form-item>
      </template>
    </slot>
  </el-form>
</template>

<script>
import { deepCopy } from 'ali-oss/lib/common/utils/deepCopy'

export default {
  name: 'YxhyTableQuery',
  props: {
    queryParams: {
      type: Object,
      default: () => {
      }
    },
    staticQueryParams: {
      type: Object,
      default: () => {
      }
    },
    queryColumns: {
      type: Array,
      default() {
        return [
          {
            // 基础下拉框
            label: '',
            placeholder: '请选择',
            type: 'select', // 搜索框类型
            selectOptions: [{ name: 111, value: 111 }], // 下拉框选项
            param: 'company', // 表单数据项
            defaultSelect: '222' // 下拉框默认选中项
          },
          {
            // 下拉框-远程搜索
            label: '',
            placeholder: '请输入',
            type: 'selectRemote', // 远程搜索
            param: 'paramKey'
          },
          {
            // 时间范围选择器
            label: '',
            placeholder: '请输入',
            type: 'datetimeRange',
            param: 'paramKey'
          },
          {
            // 输入框
            label: '',
            placeholder: '请输入',
            type: 'input',
            param: 'name'
          }
        ]
      }
    },
    shouldClearButton: {
      type: Boolean,
      default: false
    },
    /**  添加跳转路由  */
    addPageRouter: {
      type: String,
      default: ''
    },
    /**  显示添加按钮  */
    shouldAddButton: {
      type: Boolean,
      default: false
    }
  },

  data() {
    const searchFormBase = {}
    this.$props.queryColumns.forEach(item => {
      searchFormBase[item.param] = item.defaultSelect || ''
    })
    const searchForm = searchFormBase
    return {
      searchForm
    }
  },

  watch: {
    queryParams: {
      handler(val) {
        this.searchForm = {
          ...val,
          ...this.$props.staticQueryParams
        }
      },
      deep: true
    }
  },

  methods: {
    // 重置表单
    onEmpty() {
      const searchFormBase = {}
      this.queryColumns.forEach(item => {
        searchFormBase[item.param] = ''
      })
      this.searchForm = {
        ...searchFormBase,
        ...this.$props.staticQueryParams
      }
      this.$emit('update:queryParams', this.searchForm)
      this.$emit('search', this.searchForm)
    },
    // 搜索
    onSearch() {
      this.$emit('update:queryParams', this.searchForm)
      this.$emit('search', this.searchForm)
    },
    onClearInput() {
      this.$emit('update:queryParams', this.searchForm)
    },
    // 添加
    onAdd() {
      this.$router.push({
        path: this.addPageRouter
      })
    }
  }

}
</script>

<style>

</style>
